
<template>
  <div class="moneyList">
    <div class="top">
      <div class="time pad">
        <span class="label">店铺名称：</span>
        <el-input
          v-model="filter.shopName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="time pad">
        <span class="label">商户账户名称：</span>
        <el-input
          v-model="filter.merchantName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="time pad">
        <span class="label">时间：</span>
        <el-date-picker
          v-model="TimeArr"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="getTimeArr"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="time pad">
        <span class="label">管辖区域：</span>
        <el-select v-model="filter.areaId" placeholder="请选择">
          <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="btn pad">
        <el-button @click="setReset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <export-excel-button
          title="资金账户管理表"
          action="/merchant/fund/account/manage/export"
          :params="ExportParams"
        />
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:service="{ scope }">
          <div>日消费率：{{ scope.row.everydayFee }} <span v-if="scope.row.everydayFee != '-'">%</span></div>
          <div>提现费率：{{ scope.row.depositFee }} <span  v-if="scope.row.depositFee != '-'">%</span></div>
        </template>
        <template v-slot:operate="{ scope }">
          <!-- <el-button @click="getassociated(scope.row.id)" size="small" type="primary" v-if="scope.row.status == '1'">关联</el-button>
					<el-button @click="handleModify(scope.row)" size="small" v-if="scope.row.status == '2'">修改结算账户</el-button>
					<el-button @click="handlePay(scope.row)" size="small" v-if="scope.row.status == '2'">更换支付接口</el-button>
					<el-button @click="getTake(scope.row.id)" size="small" type="danger" v-if="scope.row.status == '3'">取消生效</el-button>
					<el-button @click="lookDetail(scope.row)" size="small" type="primary" v-if="scope.row.entryMerchantType==1">查看</el-button>
          <el-button @click="unbundling(scope.row)" size="small" type="primary" v-if="scope.row.payNo">解绑ID</el-button> -->
          <el-button @click="handlePay(scope.row)" size="small"
            >更换支付接口</el-button
          >
          <el-button @click="lookDetail(scope.row)" size="small" v-if="!(scope.row.everydayAccount == '未开通' && scope.row.depositAccount == '未开通')"  type="primary"
            >查看</el-button
          >
          <el-button @click="unbundling(scope.row)" size="small" type="primary"
            >解绑ID</el-button
          >
          <el-button @click="bindPaytCode(scope.row)" size="small" type="primary">绑定收款码</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog
      v-if="detailDialog"
      :id="id"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
    <editDetailDialog
      v-if="editDetailDialog"
      :id="id"
      :statusType="statusType"
      :visible.sync="editDetailDialog"
      @success="_handleSuccess"
    />
    <payDetailDialog
      v-if="payDetailDialog"
      :id="id"
      :payStatus="payStatus"
      :visible.sync="payDetailDialog"
      @success="_handleSuccess"
    />
    <watchDialog v-if="watchDialog" :id="id" :visible.sync="watchDialog" />
  </div>
</template>
<script>
// components
import DetailDialog from "./components/DetailDialog";
import editDetailDialog from "./components/editDetailDialog";
import payDetailDialog from "./components/payDetailDialog";  
import watchDialog from "./components/watchDialog";
import { userAreaSelect } from "@/api/common";
// api
import ExportExcelButton from "@/components/ExportExcelButton/index";
import {
  deleteList,
  manageList,
  cancelTake,
  managestatusCount,
  clearMerchantId,
  bingPayCode,
} from "@/api/moneyManagement";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "moneyList",
  components: {
    ExportExcelButton,
    DetailDialog,
    editDetailDialog,
    payDetailDialog,
    watchDialog,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      options: [
        { label: "选项1", value: "1" },
        { label: "选项2", value: "2" },
        { label: "选项3", value: "3" },
        { label: "选项4", value: "4" },
      ],
      type: [
        { id: "", value: "全部", num: "" },
        { id: "1", value: "待关联", num: 0 },
        { id: "3", value: "待生效", num: 0 },
        { id: "2", value: "正常", num: 0 },
        { id: "4", value: "已拒绝", num: 0 },
      ],
      tableColumn: [
        { prop: "areaName",label: "管辖区域", width: "130" },
        // { prop: 'merchantId', label: '蜜链盟商户编号',width: '130' },
        { prop: "merchantName", label: "商户账号名称", width: "150" },
        { prop: "shopName", label: "店铺名称", width: "150" },
        { prop: "entryMerchantTypeDict", label: "商家类型" },
        { prop: "payNos", label: "绑定收款码ID", width: "140" },
        { prop: "everydayAccount", label: "第三方日消账户", width: "150" },
        { prop: "depositAccount", label: "第三方存管账户", width: "150" },
        { prop: "freezeBalance", label: "冻结余额", width: "150" },
        { label: "服务费", slot: true, slotName: "service", width: "150" },
        { prop: "updateTime", label: "最后更新时间", width: "150" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "380",
          fixed: "right",
        },
      ],
      tableData: [],
      TimeArr: [],
      filter: {
        areaId:'',//区域id
        shopName:"",//店铺名称
        merchantName: "", //商户名称
        createStartTime: "", //创建时间--开始
        createEndTime: "", //创建时间--结束
      },
      areaSelect: [], //区域下拉
      value: "",
      time: "",
      currentNavtab: 0,
      detailDialog: false,
      editDetailDialog: false,
      payDetailDialog: false,
      watchDialog: false, //查看弹窗
      id: "",
      statusType: "", //修改结算账户状态区分
      payStatus: "1", //更改支付接口状态区分
    };
  },
  computed: {
    ExportParams() {
      const { id: ticketId } = this;
      const params = {
        ...this.pageOptions,
        ...this.filter,
      };
      return params;
    },
  },
  created() {
    this.getList();
    this.getNum();
    this.getUserAreaSelect();
  },
  methods: {
    getUserAreaSelect() {
      //查询用户区域下拉框
      userAreaSelect().then((res) => {
        var arr = [{
          id: "",
          value: "全部",
        }, ];
        this.areaSelect = arr.concat(res.result);
      });
    },
    //列表
    getList() {
      this.loading = true;
      const params = {
        ...this.pageOptions,
        ...this.filter,
      };
      manageList(params)
        .then((res) => {
          const { total, records } = res.result;
          records.forEach((item) => {
            if (item.entryMerchantType == 1) {
              item.entryMerchantTypeDict = "普通商家";
            } else if (item.entryMerchantType == 2) {
              item.entryMerchantTypeDict = "连锁商家";
            }
            //判断是否为空，为空展示-
            for (var key in item) {
              if (!item[key]) {
                item[key] = "-";
              }
            }
          });
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //列表状态总数
    getNum() {
      managestatusCount()
        .then((res) => {
          console.log("列表状态总数", res);
          this.type[1].num = res.result[0].count;
          this.type[2].num = res.result[2].count;
          this.type[3].num = res.result[1].count;
          this.type[4].num = res.result[3].count;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //获取时间
    getTimeArr(value) {
      console.log("time", value);
      this.filter.createStartTime = this.TimeArr[0];
      this.filter.createEndTime = this.TimeArr[1];
    },
    //切换选项
    handleTab(id) {
      console.log("id", id), (this.currentNavtab = id);
      this.filter.status = id;
      this.getList();
    },
    //重置
    setReset() {
      this.TimeArr = [];
      this.filter.shopName = "";
      this.filter.merchantName = "";
      this.filter.createStartTime = "";
      this.filter.createEndTime = "";
      this.filter.areaId = '';
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    //搜索
    search() {
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },

    //关联
    getassociated(id) {
      this.detailDialog = true;
      this.id = id;
    },
    //管理
    toManagement(data) {
      var fundId = data.id;
      var merchantNo = data.merchantNo;
      this.$router.push({
        path: "/moneyManagement/money-detail",
        query: {
          fundId: fundId,
          merchantNo: merchantNo,
        },
      });
    },
    //修改结算账户
    handleModify(item) {
      this.statusType = item.payType;
      this.id = item.id;
      this.editDetailDialog = true;
    },
    //更换支付接口
    handlePay(item) {
      if (item.payType == 3 && item.entryMerchantType == 2) {
        this.payStatus = "2";
      } else {
        this.payStatus = "1";
      }
      this.id = item.merchantId;
      this.payDetailDialog = true;
    },
    //删除资金账户
    getDelete(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          deleteList(id)
            .then((res) => {
              const {} = res.result;
              this.getList();
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    //绑定收款码
    bindPaytCode(row){
      this.$prompt('请输入绑定收款码编号', '绑定收款码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\d/,
          inputErrorMessage: '请输入',
          // inputValue: row.payNos,
        }).then(({ value }) => {
          let data = {
            merchantId: row.merchantId,
            qrCodeNo: value
          }
          bingPayCode(data).then((res) => {
            if (res.code == 200) {
              this.$message.success("绑定成功");
              this.getList();
            }
          });
        }).catch(() => {});
    },
    _handleSuccess() {
      this.getList();
    },
    //查看详情
    lookDetail(e) {
      this.id = e.merchantId
      this.watchDialog = true;
    },
    //解绑ID
    unbundling(row) {
      this.$confirm("是否解绑", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          var data = {
            merchantId: row.merchantId,
          };
          clearMerchantId(data).then((res) => {
            if (res.code == 200) {
              this.$message.success("解绑成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    //取消生效
    getTake(id) {
      this.$confirm("是否取消生效?", "提示", {
        confirmButtonText: "确认取消",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          cancelTake(id)
            .then((res) => {
              const {} = res.result;
              this.getList();
              this.$message({
                message: "取消成功",
                type: "success",
                duration: 1500,
              });
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./style/moneyList";
.time ::v-deep .el-input {
  width: 200px;
}
.el-select .el-input {
  width: 130px;
}
.first_box {
  ::v-deep :nth-child(1).el-input__inner {
    width: 100px;
  }
  ::v-deep :nth-child(2).el-input__inner {
    width: 200px;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.moneyList .main_top .lef_box .lef {
  margin-left: 0;
}
</style>